<template>
  <XenPageLayout
    title="档案补录"
    title-align="left"
    show-back
    navbar-bg-color="#7c3aed"
    navbar-text-color="#ffffff"
    navbar-icon-color="#ffffff"
    :loading="loading"
    :error="hasError"
    @retry="loadPersonData"
  >
    <view class="profile-supplement">
      <!-- 页面标题 -->
      <view class="page-header">
        <view class="header-title">
          <i
            class="iconfont icon-lianxiren"
            style="font-size: 24px; color: #7c3aed"
          ></i>
          <text class="title-text">员工档案信息补录</text>
        </view>
        <text class="subtitle-text">请选择标签页完善相应的档案信息模块</text>
      </view>

      <!-- 标签导航 -->
      <view class="tab-navigation">
        <!-- 移动端当前标签显示 - 添加安全检查 -->
        <view class="mobile-current-tab" v-if="tabs[currentTab]">
          <view
            class="current-tab-card"
            :style="{ background: tabs[currentTab]?.color || '#7c3aed' }"
          >
            <view class="tab-info">
              <view class="tab-icon-wrapper">
                <i
                  :class="`iconfont ${getIconClass(
                    tabs[currentTab]?.icon || 'contact',
                  )}`"
                  style="font-size: 20px; color: #ffffff"
                ></i>
              </view>
              <view class="tab-details">
                <text class="tab-title">{{
                  tabs[currentTab]?.title || "基本信息"
                }}</text>
                <text class="tab-progress"
                  >第 {{ currentTabIndex }} 个模块，共 6 个</text
                >
              </view>
            </view>
            <view class="tab-status">
              <text class="tab-index">{{ currentTabIndex }}/6</text>
            </view>
          </view>
        </view>

        <!-- 标签按钮网格 -->
        <view class="tab-grid" v-if="!loading">
          <view
            v-for="(tab, index) in tabs"
            :key="index"
            class="tab-button"
            :class="{ active: currentTab === index }"
            @click="switchTab(index)"
            @touchstart="() => {}"
          >
            <i
              :class="`iconfont ${getIconClass(tab.icon)}`"
              :style="getTabIconStyle(index)"
            ></i>
            <text class="tab-label">{{ tab.title }}</text>
          </view>
        </view>
      </view>

      <!-- 标签内容区域 -->
      <view class="tab-content-wrapper">
        <!-- 基本信息 -->
        <view v-show="currentTab === 0" class="tab-content">
          <XenBasicInfoForm
            ref="basicInfoFormRef"
            v-model="formData.basic"
            :is-saving="isSaving"
            @save="handleSaveBasicInfo"
          />
        </view>

        <!-- 工作信息 -->
        <view v-show="currentTab === 1" class="tab-content">
          <XenWorkInfo
            :person-id="repairBillId"
            :basic-info="personBasicInfo || undefined"
          />
        </view>

        <!-- 学习经历 -->
        <view v-show="currentTab === 2" class="tab-content">
          <XenEducationInfo :person-id="repairBillId" />
        </view>

        <!-- 家庭成员 -->
        <view v-show="currentTab === 3" class="tab-content">
          <XenFamilyInfo :person-id="repairBillId" />
        </view>

        <!-- 人员履历 -->
        <view v-show="currentTab === 4" class="tab-content">
          <XenResumeInfo :person-id="repairBillId" />
        </view>

        <!-- 荣誉职称 -->
        <view v-show="currentTab === 5" class="tab-content">
          <XenHonorInfo :person-id="repairBillId" />
        </view>
      </view>

      <!-- 底部操作栏 -->
      <view class="bottom-actions">
        <view class="action-hint">
          <i
            class="iconfont icon-xiazai16"
            style="font-size: 16px; color: #6b7280; margin-right: 4px"
          ></i>
          <text class="hint-text">完成六个模块的填写后，请点击全部提交！</text>
        </view>
        <view class="action-hint">
          <text class="hint-text">点击返回顶部选择其他模块继续填写！</text>
        </view>
        <view class="action-buttons">
          <button class="custom-button secondary-button" @click="scrollToTop">
            <i
              class="iconfont icon-zhifeiji"
              style="font-size: 16px; color: #7c3aed; margin-right: 4px"
            ></i>
            返回顶部
          </button>
          <button
            class="custom-button primary-button"
            @click="submitForm"
            :disabled="isSaving"
          >
            <i
              v-if="!isSaving"
              class="iconfont icon-gouxuan"
              style="font-size: 16px; color: #ffffff; margin-right: 4px"
            ></i>
            <i
              v-else
              class="iconfont icon-shuaxin"
              style="
                font-size: 16px;
                color: #ffffff;
                margin-right: 4px;
                animation: spin 1s linear infinite;
              "
            ></i>
            {{ isSaving ? "提交中..." : "全部提交" }}
          </button>
        </view>
      </view>
    </view>
  </XenPageLayout>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import XenPageLayout from "@/layouts/XenPageLayout.vue";
import XenBasicInfoForm from "./components/XenBasicInfoForm.vue";
import XenWorkInfo from "./components/XenWorkInfo.vue";
import XenEducationInfo from "./components/XenEducationInfo.vue";
import XenFamilyInfo from "./components/XenFamilyInfo.vue";
import XenResumeInfo from "./components/XenResumeInfo.vue";
import XenHonorInfo from "./components/XenHonorInfo.vue";
import useActivityApi from "../api/index";
import type { ISysPersonRepairBill, SearchResponse } from "../api/interface";

const api = useActivityApi();

// 页面状态
const loading = ref(false);
const hasError = ref(false);
const repairBillId = ref<string>("");

// 工作流状态管理
const isInApproval = ref(false); // 是否处于审核中状态

// 基本信息表单组件引用
const basicInfoFormRef = ref<InstanceType<typeof XenBasicInfoForm>>();

// 人员基本信息（用于工作信息组件）
const personBasicInfo = ref<SearchResponse | null>(null);

// 图标映射方法
const getIconClass = (iconType: string) => {
  const iconMap: { [key: string]: string } = {
    contact: "icon-lianxiren", // 联系人图标
    "icon-briefcase": "icon-gongwenbao", // 工作信息图标
    "icon-book": "icon-shuben", // 学习经历图标
    "person-filled": "icon-kehu-kehulianxiren", // 家庭成员图标
    "icon-resume": "icon-renyuanguanli", // 人员履历图标
    "icon-renshi-jiangchengjilu": "icon-renshi-jiangchengjilu", // 荣誉职称图标
    plus: "icon-zengjiatianjiajiahao", // 添加图标
    trash: "icon-lajitong", // 删除图标
    info: "icon-xiazai16", // 信息图标
    refresh: "icon-shuaxin", // 刷新图标
    checkmarkempty: "icon-gouxuan", // 勾选图标
  };
  return iconMap[iconType] || "icon-lianxiren";
};

// 获取标签图标样式 - 改为普通方法避免递归更新
const getTabIconStyle = (index: number) => {
  return {
    fontSize: "24px",
    color: currentTab.value === index ? "#ffffff" : "#6b7280",
  };
};

// 当前标签页 - 确保初始值在有效范围内
const currentTab = ref(0);

// 保存状态
const isSaving = ref(false);

// 标签页配置 - 确保这个数组总是存在
const tabs = ref([
  {
    title: "基本信息",
    icon: "contact" as const,
    color: "linear-gradient(135deg, #3b82f6, #1d4ed8)",
  },
  {
    title: "以往工作经历",
    icon: "icon-briefcase" as const,
    color: "linear-gradient(135deg, #f59e0b, #d97706)",
  },
  {
    title: "学习经历",
    icon: "icon-book" as const,
    color: "linear-gradient(135deg, #14b8a6, #0d9488)",
  },
  {
    title: "家庭成员",
    icon: "person-filled" as const,
    color: "linear-gradient(135deg, #6366f1, #4f46e5)",
  },
  {
    title: "人员履历",
    icon: "icon-resume" as const,
    color: "linear-gradient(135deg, #8b5cf6, #7c3aed)",
  },
  {
    title: "荣誉职称",
    icon: "icon-renshi-jiangchengjilu" as const,
    color: "linear-gradient(135deg, #f97316, #ea580c)",
  },
]);

// 计算属性 - 避免在模板中进行复杂计算
const currentTabIndex = computed(() => currentTab.value + 1);

// 表单数据
const formData = ref({
  basic: {} as Partial<ISysPersonRepairBill>,
});

// 加载人员数据
const loadPersonData = async () => {
  if (!repairBillId.value) {
    loading.value = false;
    return;
  }

  loading.value = true;
  hasError.value = false;

  try {
    // 直接使用档案补录ID获取档案补录数据
    const repairRes = await api.getRepairBill(repairBillId.value);

    if (repairRes && repairRes.Entity) {
      // 使用档案补录数据回显表单和设置人员基本信息
      formData.value.basic = repairRes.Entity as any;
      personBasicInfo.value = repairRes.Entity as any;

      // 检查WorkflowStatus状态
      const workflowStatus = (repairRes.Entity as any).WorkflowStatus;
      isInApproval.value = workflowStatus === "审核中";

      console.log(
        "WorkflowStatus:",
        workflowStatus,
        "isInApproval:",
        isInApproval.value,
      );

      // 通知子组件加载数据
      if (basicInfoFormRef.value) {
        basicInfoFormRef.value.loadData(formData.value.basic);
      }
    } else {
      hasError.value = true;
      uni.showToast({
        title: "获取档案补录数据失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error("加载档案补录数据异常:", error);
    hasError.value = true;
    uni.showToast({
      title: "数据加载失败",
      icon: "none",
    });
  } finally {
    loading.value = false;
  }
};

// 方法 - 添加边界检查
const switchTab = (index: number) => {
  if (index >= 0 && index < tabs.value.length) {
    currentTab.value = index;
  }
};

// 生成BillCode的函数
const generateBillCode = () => {
  // 如果表单数据中已经有 BillCode，就使用现有的
  if (formData.value.basic.BillCode) {
    return formData.value.basic.BillCode;
  }

  const timestamp = Date.now();
  const randomStr = Math.random().toString(36).substring(2, 8).toUpperCase();
  return `RB${timestamp}${randomStr}`;
};

// 统一的错误处理函数
const handleError = (error: any, defaultMessage: string) => {
  let errorMessage = defaultMessage;

  if (error?.data?.Message?.[0]) {
    errorMessage = error.data.Message[0];
  } else if (error?.[0]?.errorMessage) {
    errorMessage = error[0].errorMessage;
  } else if (error?.message) {
    errorMessage = error.message;
  }

  console.error("操作失败:", error);
  uni.showToast({
    title: errorMessage,
    icon: "none",
  });
};

// 统一的数据映射函数
const buildEntityData = (
  basicInfo: Partial<ISysPersonRepairBill>,
  status: "draft" | "submit",
) => {
  let finalBillCode = basicInfo.BillCode;
  if (!finalBillCode) {
    finalBillCode = generateBillCode();
  }

  // 获取原始状态值
  const originalBillStatus = (formData.value.basic as any).BillStatus;
  const originalWorkflowStatus = (formData.value.basic as any).WorkflowStatus;

  // 根据模式设置状态
  let billStatus, workflowStatus;

  if (status === "draft") {
    // draft模式：保持原有状态
    billStatus = originalBillStatus;
    workflowStatus = originalWorkflowStatus;
  } else {
    // submit模式：BillStatus保持原状态，WorkflowStatus条件判断
    billStatus = originalBillStatus;
    workflowStatus =
      originalWorkflowStatus === "待提交" ? "提交中" : originalWorkflowStatus;
  }

  return {
    Entity: {
      // 确保所有undefined字段转换为null
      // 如果有档案补录ID则使用档案补录ID，否则为null（创建新记录）
      ID: repairBillId.value || null,
      BillCode: finalBillCode,
      BillStatus: billStatus,
      WorkflowStatus: workflowStatus,
      Remark: basicInfo.Remark ?? null,
      Approver: basicInfo.Approver ?? null,
      ApprovalTime: basicInfo.ApprovalTime ?? null,
      Name: basicInfo.Name ?? null,
      StaffNo: basicInfo.StaffNo ?? null,
      BirthDate: basicInfo.BirthDate ?? null,
      Age: basicInfo.Age ?? null,
      Gender: basicInfo.Gender ?? null,
      Ethnicity: basicInfo.Ethnicity ?? null,
      HighestEducation: basicInfo.HighestEducation ?? null,
      MajorCategory: basicInfo.MajorCategory ?? null,
      MajorName: basicInfo.MajorName ?? null,
      MaritalStatus: basicInfo.MaritalStatus ?? null,
      FertilityStatus: basicInfo.FertilityStatus ?? null,
      PhotoId: basicInfo.PhotoId ?? null,
      IdCardNo: basicInfo.IdCardNo ?? null,
      IdCardFrontPhotoId: basicInfo.IdCardFrontPhotoId ?? null,
      IdCardBackPhotoId: basicInfo.IdCardBackPhotoId ?? null,
      IdCardExpiryDate: basicInfo.IdCardExpiryDate ?? null,
      HouseholdRegistration: basicInfo.HouseholdRegistration ?? null,
      NativePlace: basicInfo.NativePlace ?? null,
      PoliticalStatus: basicInfo.PoliticalStatus ?? null,
      PartyJoinDate: basicInfo.PartyJoinDate ?? null,
      PartyBranch: basicInfo.PartyBranch ?? null,
      ArchiveLocation: basicInfo.ArchiveLocation ?? null,
      ArchiveNo: basicInfo.ArchiveNo ?? null,
      ArchiveTransferOutDate: basicInfo.ArchiveTransferOutDate ?? null,
      ArchiveTransferInDate: basicInfo.ArchiveTransferInDate ?? null,
      HomeAddress: basicInfo.HomeAddress ?? null,
      Phone: basicInfo.Phone ?? null,
      Email: basicInfo.Email ?? null,
      SalaryBank: basicInfo.SalaryBank ?? null,
      SalaryAccount: basicInfo.SalaryAccount ?? null,
      BonusBank: basicInfo.BonusBank ?? null,
      BonusAccount: basicInfo.BonusAccount ?? null,
      OrgId: basicInfo.OrgId ?? null,
      GroupId: basicInfo.GroupId ?? null,
      JobPositionId: basicInfo.JobPositionId ?? null,
      ResumeId: null, // 移除简历字段，设置为null
      HireDate: basicInfo.HireDate ?? null,
      ConfirmationDate: basicInfo.ConfirmationDate ?? null,
      EmploymentType: basicInfo.EmploymentType ?? null,
      ContractType: basicInfo.ContractType ?? null,
      ContractNo: basicInfo.ContractNo ?? null,
      ContractStartDate: basicInfo.ContractStartDate ?? null,
      ContractEndDate: basicInfo.ContractEndDate ?? null,
      ResignationDate: null, // 移除离职日期字段，设置为null
      ResignationReason: null, // 移除离职原因字段，设置为null
      ResignationType: null, // 移除离职类型字段，设置为null
      State: "在职", // 移除人员状态字段，设置默认值为在职
      BloodType: basicInfo.BloodType ?? null,
      Hobbies: basicInfo.Hobbies ?? null,
      JoinWorkDate: basicInfo.JoinWorkDate ?? null,
      ArchiveAgeDate: basicInfo.ArchiveAgeDate ?? null,
      WorkYears: basicInfo.WorkYears ?? null,
      IsVeteran: basicInfo.IsVeteran ?? null,
      VeteranCertificateId: basicInfo.VeteranCertificateId ?? null,
    },
    ActionName: null,
    IsMyApprove: false as boolean,
  };
};

// 统一的表单验证函数
const validateForm = async (): Promise<boolean> => {
  try {
    if (basicInfoFormRef.value) {
      return await basicInfoFormRef.value.validate();
    }
    return false;
  } catch (error) {
    handleError(error, "表单验证失败");
    return false;
  }
};

// 显示确认提示框
const showConfirmDialog = async (): Promise<boolean> => {
  return new Promise<boolean>((resolve) => {
    uni.showModal({
      title: "确认提交",
      content:
        "基本信息、以往工作经历、学习经历、家庭成员、人员履历、荣誉职称确认完成后点击确定提交",
      confirmText: "确定提交",
      cancelText: "取消",
      success: (res) => {
        resolve(res.confirm);
      },
      fail: () => {
        resolve(false);
      },
    });
  });
};

// 统一的保存/提交处理函数
const processFormData = async (
  type: "save" | "submit",
  basicInfo?: Partial<ISysPersonRepairBill>,
) => {
  try {
    isSaving.value = true;

    // 验证表单
    const isValid = await validateForm();
    if (!isValid) {
      if (type === "submit") {
        currentTab.value = 0; // 切换到基本信息tab
        uni.showToast({
          title: "请先完善基本信息",
          icon: "none",
        });
      }
      return;
    }

    // 如果是提交操作，显示确认提示框
    if (type === "submit") {
      const confirmResult = await showConfirmDialog();
      if (!confirmResult) return;
    }

    // 构建数据
    const dataToSave = basicInfo || formData.value.basic;
    const submitData = buildEntityData(
      dataToSave,
      type === "submit" ? "submit" : "draft",
    );

    console.log(`${type === "submit" ? "提交" : "保存"}数据:`, submitData);

    // 调用API
    const result = await api.editRepairBill(submitData);

    // 显示成功提示
    const successMessage = type === "submit" ? "档案提交成功" : "保存成功";
    uni.showToast({
      title: successMessage,
      icon: "success",
    });

    // 更新本地状态
    if (!repairBillId.value && result?.Data?.ID) {
      repairBillId.value = result.Data.ID;
    }

    // 更新表单状态
    if (type === "submit") {
      // 根据新的状态逻辑更新本地状态
      const originalWorkflowStatus = (formData.value.basic as any)
        .WorkflowStatus;
      if (originalWorkflowStatus === "待提交") {
        (formData.value.basic as any).WorkflowStatus = "提交中";
      }
      // BillStatus保持不变
    }

    // 如果是提交操作，跳转到工作台
    if (type === "submit") {
      setTimeout(() => {
        uni.reLaunch({
          url: "/pages/work/work",
          success: () => {},
          fail: () => {
            uni.navigateBack({ delta: 1 });
          },
        });
      }, 500);
    }
  } finally {
    isSaving.value = false;
  }
};

// 处理基本信息保存 - 使用统一的处理函数
const handleSaveBasicInfo = async (
  basicInfo: Partial<ISysPersonRepairBill>,
) => {
  await processFormData("save", basicInfo);
};

// 审核提交处理函数
const processApprovalSubmit = async () => {
  try {
    isSaving.value = true;

    // 验证表单
    const isValid = await validateForm();
    if (!isValid) {
      currentTab.value = 0; // 切换到基本信息tab
      uni.showToast({
        title: "请先完善基本信息",
        icon: "none",
      });
      return;
    }

    // 显示确认提示框
    const confirmResult = await showConfirmDialog();
    if (!confirmResult) return;

    // 构建审批数据
    const approvalData = {
      ActionName: "同意",
      IsMyApprove: true,
      Remark: "",
      Entity: formData.value.basic as ISysPersonRepairBill,
    };

    console.log("审批提交数据:", approvalData);

    // 调用审批接口，不传递tag参数
    await api.approveRepairBill(approvalData);

    // 显示成功提示
    uni.showToast({
      title: "档案提交成功",
      icon: "success",
    });

    // 跳转到工作台
    setTimeout(() => {
      uni.reLaunch({
        url: "/pages/work/work",
        success: () => {},
        fail: () => {
          uni.navigateBack({ delta: 1 });
        },
      });
    }, 500);
  } finally {
    isSaving.value = false;
  }
};

// 提交表单 - 根据状态调用不同的处理函数
const submitForm = async () => {
  if (isInApproval.value) {
    // 如果是审核中状态，调用审批接口
    await processApprovalSubmit();
  } else {
    // 否则使用原有的提交逻辑
    await processFormData("submit");
  }
};

// 用户信息
const userInfo = ref<any>(null);

// 加载用户人员信息 - 直接检查档案补录记录
const loadUserPersonInfo = async () => {
  if (!userInfo.value?.ITCode) {
    hasError.value = true;
    uni.showToast({
      title: "缺少用户信息",
      icon: "none",
    });
    return;
  }

  loading.value = true;
  hasError.value = false;

  try {
    // 直接检查是否有待提交的档案补录记录
    await loadPendingRepairBill();
  } catch (error) {
    console.error("获取档案补录信息异常:", error);
    hasError.value = true;
    uni.showToast({
      title: "获取档案补录信息失败",
      icon: "none",
    });
  }
};

// 加载草稿的档案补录记录
const loadPendingRepairBill = async () => {
  try {
    // 使用用户的工号和手机号搜索档案补录记录
    const searchParams = {
      Limit: 50,
      SortInfo: null,
      Page: 1,
    };

    const res = await api.searchRepairBill(searchParams);

    if (res?.Data && Array.isArray(res.Data)) {
      // 过滤出BillStatus为"草稿"且StaffNo与当前用户工号匹配的记录
      const pendingList = res.Data.filter(
        (item: any) =>
          item.BillStatus === "草稿" && item.StaffNo === userInfo.value?.ITCode,
      );

      if (pendingList.length > 0) {
        // 如果有草稿的记录，使用第一条记录的ID
        repairBillId.value = pendingList[0].ID;

        // 继续加载数据
        await loadPersonData();
      } else {
        // 没有草稿的记录，提示用户并返回工作台

        loading.value = false;
        console.log("准备显示无待提交记录模态框");
        uni.showModal({
          title: "提示",
          content: "暂无需要补录的档案，请联系管理员",
          showCancel: false,
          confirmText: "确定",
          success: (res) => {
            console.log("模态框回调成功:", res);
            uni.reLaunch({
              url: "/pages/work/work",
            });
          },
          fail: (err) => {
            console.error("模态框显示失败:", err);
            // 失败后直接返回工作台
            setTimeout(() => {
              uni.reLaunch({
                url: "/pages/work/work",
              });
            }, 1000);
          },
          complete: () => {
            console.log("模态框调用完成");
          },
        });
        return;
      }
    } else {
      // 档案补录列表为空，提示用户并返回工作台

      loading.value = false;
      console.log("准备显示无档案补录数据模态框");
      uni.showModal({
        title: "提示",
        content: "暂无需要补录的档案，请联系管理员",
        showCancel: false,
        confirmText: "确定",
        success: (res) => {
          console.log("模态框回调成功:", res);
          uni.reLaunch({
            url: "/pages/work/work",
          });
        },
        fail: (err) => {
          console.error("模态框显示失败:", err);
          // 失败后直接返回工作台
          setTimeout(() => {
            uni.reLaunch({
              url: "/pages/work/work",
            });
          }, 1000);
        },
        complete: () => {
          console.log("模态框调用完成");
        },
      });
      return;
    }
  } catch (error) {
    console.error("获取档案补录记录异常:", error);
    loading.value = false;
    console.log("准备显示获取档案补录信息失败模态框");
    uni.showModal({
      title: "错误",
      content: "获取档案补录信息失败，请检查网络连接后重试",
      showCancel: false,
      confirmText: "确定",
      success: (res) => {
        console.log("模态框回调成功:", res);
        uni.reLaunch({
          url: "/pages/work/work",
        });
      },
      fail: (err) => {
        console.error("模态框显示失败:", err);
        // 失败后直接返回工作台
        setTimeout(() => {
          uni.reLaunch({
            url: "/pages/work/work",
          });
        }, 1000);
      },
      complete: () => {
        console.log("模态框调用完成");
      },
    });
  }
};

// 返回顶部功能
const scrollToTop = () => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300,
  });
};

// 页面加载时的处理
onMounted(() => {
  // 从本地存储获取用户信息
  const cachedUserInfo = uni.getStorageSync("userInfo");
  if (cachedUserInfo) {
    userInfo.value = cachedUserInfo;

    // 加载人员信息
    loadUserPersonInfo();
  } else {
    loading.value = false;
    hasError.value = true;
    uni.showToast({
      title: "请先登录",
      icon: "none",
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});
</script>

<style lang="scss" scoped>
.profile-supplement {
  padding: 20rpx;
  background: #f8fafc;
  min-height: 100vh;

  .page-header {
    text-align: center;
    margin-top: 20rpx;
    margin-bottom: 40rpx;

    .header-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
      margin-bottom: 16rpx;

      .title-text {
        font-size: 36rpx;
        font-weight: bold;
        color: #374151;
      }
    }

    .subtitle-text {
      font-size: 28rpx;
      color: #6b7280;
    }
  }

  .tab-navigation {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 24rpx;
    margin-bottom: 32rpx;
    box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);

    .mobile-current-tab {
      margin-bottom: 32rpx;

      .current-tab-card {
        border-radius: 20rpx;
        padding: 24rpx;
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tab-info {
          display: flex;
          align-items: center;
          gap: 20rpx;

          .tab-icon-wrapper {
            width: 60rpx;
            height: 60rpx;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .tab-details {
            .tab-title {
              font-size: 28rpx;
              font-weight: bold;
              display: block;
            }

            .tab-progress {
              font-size: 22rpx;
              opacity: 0.9;
              display: block;
            }
          }
        }

        .tab-status {
          text-align: right;

          .tab-index {
            font-size: 32rpx;
            font-weight: bold;
            display: block;
          }
        }
      }
    }

    .tab-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16rpx;

      .tab-button {
        border: 4rpx solid #e5e7eb;
        border-radius: 16rpx;
        padding: 24rpx 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12rpx;
        transition: all 0.3s ease;
        background: white;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        position: relative;
        z-index: 1;

        &:active {
          transform: scale(0.98);
        }

        &.active {
          background: #7c3aed;
          border-color: #7c3aed;
          transform: scale(1.02);
        }

        .tab-label {
          font-size: 24rpx;
          font-weight: 500;
          color: #6b7280;
          pointer-events: none;
        }

        &.active .tab-label {
          color: white;
        }

        i {
          pointer-events: none;
        }
      }
    }
  }

  .tab-content-wrapper {
    .tab-content {
      background: #ffffff;
      border-radius: 24rpx;
      padding: 32rpx;
      box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);

      .content-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 32rpx;

        .header-left {
          display: flex;
          align-items: center;
          gap: 16rpx;

          .section-title {
            font-size: 36rpx;
            font-weight: bold;
            color: #374151;
          }
        }
      }

      .subsection {
        margin-bottom: 48rpx;

        .subsection-title {
          font-size: 32rpx;
          font-weight: 600;
          color: #374151;
          display: block;
          margin-bottom: 24rpx;
        }

        .subsection-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24rpx;

          .subsection-title {
            margin-bottom: 0;
          }
        }
      }

      .form-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 24rpx;

        @media (min-width: 768px) {
          grid-template-columns: repeat(2, 1fr);
        }

        @media (min-width: 1024px) {
          grid-template-columns: repeat(3, 1fr);
        }

        .form-item {
          &.full-width {
            grid-column: 1 / -1;
          }

          .form-label {
            display: block;
            font-size: 28rpx;
            font-weight: 600;
            color: #374151;
            margin-bottom: 12rpx;

            .required {
              color: #ef4444;
            }
          }
        }
      }

      .dynamic-list {
        .dynamic-item {
          background: #f8fafc;
          border: 2rpx solid #e2e8f0;
          border-radius: 16rpx;
          padding: 32rpx;
          margin-bottom: 24rpx;
          transition: all 0.3s ease;

          &:hover {
            transform: translateY(-4rpx);
            box-shadow: 0 16rpx 50rpx rgba(0, 0, 0, 0.1);
          }

          .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24rpx;

            .item-title {
              font-size: 32rpx;
              font-weight: 600;
              color: #374151;
            }
          }
        }
      }
    }
  }

  .bottom-actions {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    margin-top: 32rpx;
    box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.1);

    .action-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12rpx;
      margin-bottom: 24rpx;

      .hint-text {
        font-size: 26rpx;
        color: #6b7280;
      }
    }

    .action-buttons {
      display: flex;
      gap: 24rpx;
      justify-content: center;

      .custom-button {
        flex: 1;
        max-width: 300rpx;
      }
    }
  }
}

// 组件库样式覆盖
:deep(.uni-easyinput__placeholder-class) {
  color: #9ca3af !important;
}

:deep(.uni-datetime-picker--x) {
  width: 100%;
}

:deep(.uni-data-select) {
  width: 100%;
}

:deep(.uni-tag--primary) {
  background: #3b82f6 !important;
}

// 自定义按钮样式
.custom-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 24px;
  border-radius: 8px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  max-width: 300rpx;

  &.default-button {
    background: #f8f9fa;
    color: #6b7280;
    border: 1px solid #e5e7eb;

    &:active {
      background: #f1f3f5;
    }
  }

  &.secondary-button {
    background: #ffffff;
    color: #7c3aed;
    border: 2px solid #7c3aed;

    &:active {
      background: #f3f4f6;
    }
  }

  &.primary-button {
    background: #7c3aed;
    color: #ffffff;

    &:active {
      background: #6d28d9;
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
  }
}

// 加载动画
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
